<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>bos后台系统的主界面架构</title>
		<!-- 导入js文件或其他静态资源，它的顶级根目录是：webapp -->
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="../js/easyui/themes/icon.css" />

		<!--导入ztree的js文件 -->
		<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
		<link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" />

		<script type="text/javascript">
			// 设置、数据、初始化
			var setting = {
				data: {
					simpleData: {
						enable: true
					}
				},
				callback:{
					onClick:function(event, treeId, treeNode, clickFlag){
						//在点击菜单前，先判断下content的属性是否为空（undefined或'')
						if(treeNode.content == undefined || treeNode.content == ''){
							return;
						}
						
						// 开启一个新的tab页面
						var content = '<div style="width:100%;height:100%;overflow:hidden;">'
								+ '<iframe src="'
								+ treeNode.content
								+ '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';
						
						//当每次点击时，要判断这个tab选项卡是否已经存在
						if($("#tt").tabs("exists",treeNode.name)){//如果存在，则为true
							//存在，则直接选 中
							$("#tt").tabs("select",treeNode.name)
						}else{
							$('#tt').tabs('add',{ 
							title:treeNode.name, 
							content:content, 
							closable:true, 
							}
						);
						}
						
						
					}
				}
			};
			//设置数据源
				var zNodes =[
					{ id:1, pId:0, name:"基础档案"},
					{ id:11, pId:1, name:"基础档案设置",content:"http://www.itcast.cn"},
					{ id:12, pId:1, name:"收派标准",content:"http://www.baidu.com"},
					{ id:13, pId:1, name:"班车管理"},
					{ id:2, pId:0, name:"受理"},
					{ id:21, pId:2, name:"运输配送管理"},
					{ id:22, pId:2, name:"业务受理"}
				];
			
			//界面加载完成后，将调用 的函数
			$(function(){//js需要写在初始化完成的函数内的情况：当js代码需要引用页面中的id的值时，必须写在函数内
				$.fn.zTree.init($("#menuTree"), setting, zNodes);
				
		
			});
			
			
		</script>
	</head>

	<body class="easyui-layout">

		<div data-options="region:'north',split:true" style="height:100px;"></div>

		<div data-options="region:'south',split:true" style="height:100px;"></div>

		<div data-options="region:'west',title:'菜单导航',split:true" style="width:180px;">
			<div id="aa" class="easyui-accordion" data-options="fit:true"> 
				<div data-options="title:'基本功能'" > 
					<div id="menuTree" class="ztree"></div>
				</div> 
				<div data-options="title:'系统设置'" > 
					
				</div> 
			</div>
			
			
		</div>

		<div data-options="region:'center'" style="padding:5px;background:#eee;">
			<div id="tt" class="easyui-tabs" data-options="fit:true">

			</div>

		</div>

	</body>

</html>